<template>
	<view class="meter-list">
		<li v-for="(item,index) in list" :key="item.index" @tap="toReadingEdit(item.id,item.buidingNo,item.uniqueNumber)">
			<view class="Rleft">
				<view class="RNameID">
					<text class="RoomName">{{item.buidingNo}} - {{item.uniqueNumber}}{{item.typeText}}</text>
					<!-- <text class="RommId">{{item.uniqueNumber}}</text> -->
				</view>
				<view class="TimeBox">
					<text class="STime">{{item.meterReadingTime}}</text>
				</view>
				<text class="timeg" style="float: left;">-</text>
				<view class="TimeBox">
					<text class="ETime">{{item.deadline}}</text>
				</view>
			</view>
			<view class="Rright">
				<view class="RTPR">
					<text class="RT">总费用</text>
					<view class="Price-box">
						<text class="Price">{{item.payFee}}</text>
						<view class="bg"></view>
					</view>
				</view>
				<view :class="'bgImg'+item.status"></view>
			</view>
		</li>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			toReadingEdit(id,buidingNo,uniqueNumber) {
				// console.log("正在缴费")
				uni.navigateTo({
					url: `/pages/meterCheck/RoomInfo/RoomInfo?id=` + id+`&cname=`+buidingNo+'-'+uniqueNumber
				})
			},
		}
	}
</script>

<style lang="scss">
	.meter-list {
		list-style: none;

		li {
			width: 100%;
			height: 140rpx;

			background-color: #FFFFFF;
			list-style: none;

			margin-bottom: 20rpx;


			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.bgImg1 {
			background: url(/static/image/weijiaofei@2x.png)no-repeat;
			background-size: 100% 100%;
			width: 120rpx;
			height: 92rpx;
			margin: 0 -20rpx 0 20rpx;
			position: absolute;
		}

		.bgImg2 {
			background: url(/static/image/yijiaofei-beifen.png)no-repeat;
			background-size: 100% 100%;
			width: 120rpx;
			height: 92rpx;
			margin: 0 -20rpx 0 20rpx;
			position: absolute;
		}
		.bgImg3 {
			background: url(/static/image/yijiesuan@2x.png)no-repeat;
			background-size: 100% 100%;
			width: 120rpx;
			height: 92rpx;
			margin: 0 -20rpx 0 20rpx;
			position: absolute;
		}
		.bgImg4 {
			background: url(/static/image/daijiesuan@2x.png)no-repeat;
			background-size: 100% 100%;
			width: 120rpx;
			height: 92rpx;
			margin: 0 -20rpx 0 20rpx;
			position: absolute;
		}
		


		.Rleft,
		.Rright {
			width: 48%;
		}

		/* 房间左边 */
		.Rleft {
			font-size: 20rpx;
			margin-left: 20rpx;
		}

		.RoomName,
		.RommId {
			font-size: 26rpx;
			font-weight: bold;
		}

		.RoomName {
			margin-right: 40rpx;
		}

		.RNameID {
			margin-bottom: 20rpx;
		}

		.STime,
		.ETime {
			color: #C7C7C7;
		}

		.timeg {
			color: #C7C7C7;
			margin: 0 10rpx;
		}

		.TimeBox {
			/* border: #109EF8 solid 1px; */
			// width: 74px;
			overflow: hidden;
			white-space: nowrap;
			float: left;
		}

		/* .timeg::before {
					content: " - ";
				} */

		/* 房间右边 */
		.Rright {
			width: 100px;
			float: right;
			margin-right: 20rpx;
			display: flex;
			justify-content: flex-start;
		}

		.Rright .Price-box {
			position: relative;
		}

		.Rright .bg {
			background-color: #ffffff;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 4;
			filter: blur(10px); 
		}

		.Rright .Price {
			font-size: 32rpx;
			color: #FFA578;
			font-weight: bold;
			margin-top: 16rpx;
			position: relative;
			z-index: 5;
		}

		.Rright .Price::after {
			content: "元";
		}

		.Rright .RTPR {
			display: flex;
			flex-direction: column;
		}

		.Rright .RT {
			background-color: #109EF8;
			color: #FFFFFF;
			font-size: 24rpx;
			border-radius: 4rpx;
			align-self: baseline;
			position: relative;
			z-index: 8;
		}

		.RedingRooms .Rright image {
			width: 120rpx;
			height: 92rpx;

			margin-left: 20rpx;
		}
	}
</style>
